<script setup>
import { ref } from 'vue'
import { requireImg } from '@/utils/common'
const qxList = ref([
  {
    name: '风速',
    icon: requireImg('infrastructure/fs.png'),
    value: 70,
    unit: 'm/s'
  },
  {
    name: '风向',
    icon: requireImg('infrastructure/fx.png'),
    value: '东南风',
    unit: ''
  },
  {
    name: '湿度',
    icon: requireImg('infrastructure/sd.png'),
    value: '70',
    unit: '%'
  },
  {
    name: '日雨量',
    icon: requireImg('infrastructure/ryl.png'),
    value: '100',
    unit: 'ml'
  },
  {
    name: '气压',
    icon: requireImg('infrastructure/qy.png'),
    value: '50',
    unit: 'kpa'
  }
])
</script>

<template>
  <div class="card">
    <CommonTitle title="当前气象指标" />
    <div class="content">
      <div class="left">
        <p><img src="@img/infrastructure/temp.png" /></p>
        <p>
          <span>实时</span><span><b>24</b>℃</span>
        </p>
      </div>
      <div class="right">
        <p><img src="@img/infrastructure/temp_icon.png" /></p>
        <p>
          <span>温度变化率</span>
          <span><b>>10</b>℃/h</span>
        </p>
      </div>
    </div>
    <ul class="qxList">
      <li v-for="(item, index) in qxList" :key="index">
        <p><img :src="item.icon" /></p>
        <p>
          <span>{{ item.name }}</span>
          <span
            ><b>{{ item.value }}</b
            >{{ item.unit }}</span
          >
        </p>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.card {
  margin-top: 15px;
  height: 240px;

  .content {
    height: 104px;
    margin: 10px 10px 5px;
    display: flex;
    align-items: center;
    background: linear-gradient(to left, rgba(0, 255, 210, 0.1) 0%, rgba(0, 255, 229, 0) 100%);

    .left {
      width: 137px;
      margin-left: 10px;

      p:first-child {
        width: 100%;
        height: 100px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      p:last-child {
        margin-top: -20px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        span:first-child {
          position: relative;
          font-size: 18px;
          padding-left: 20px;

          &::after {
            position: absolute;
            content: '';
            top: 10px;
            left: 0;
            width: 6px;
            height: 6px;
            background: #90ffe2;
            box-shadow: 0px 0px 16px 3px #00ffe4;
          }
        }

        span:last-child {
          color: rgba(255, 255, 255, 0.7);
          b {
            font-family: YouSheBiaoTiHei;
            font-size: 24px;
            color: #ffbb33;
            margin-right: 10px;
          }
        }
      }
    }

    .right {
      flex: 1;
      margin-left: 12px;
      display: flex;
      align-items: center;
      justify-content: center;

      p:first-child {
        width: 35px;
        height: 32px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      p:last-child {
        display: flex;
        flex-direction: column;
        margin-left: 10px;

        b {
          font-family: YouSheBiaoTiHei;
          font-size: 24px;
          color: #42fff5;
          margin-right: 10px;
        }
      }
    }
  }

  .qxList {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;

    li {
      width: 100px;
      height: 40px;
      display: flex;
      margin: 5px;
      align-items: center;

      &:nth-child(1) {
        margin-left: 50px;
      }
      &:nth-child(2) {
        margin-right: 50px;
      }

      p:first-child {
        width: 38px;
        height: 38px;
        margin-right: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }

      p:last-child {
        display: flex;
        flex-direction: column;

        span:first-child {
          position: relative;
          color: #d9efff;
          font-size: 13px;

          &::after {
            position: absolute;
            content: '';
            bottom: 0px;
            left: 0;
            width: 68px;
            height: 6px;
            background: linear-gradient(
              97deg,
              #4defff 0%,
              rgba(0, 213, 255, 0.3) 21%,
              rgba(0, 255, 250, 0) 100%
            );
          }
        }

        span:last-child {
          color: rgba(255, 255, 255, 0.7);
          b {
            font-family: YouSheBiaoTiHei;
            font-size: 16px;
            color: #42fff5;
            margin-right: 3px;
          }
        }
      }
    }
  }
}
</style>
